<template>
    <div class="warpper-box">
      <form-create 
      class="custom-select"
      v-model="params.fApi" 
      :rule="params.rule" 
      :option="params.option" 
      @btn-search-click="loadTable(true)"
      @btn-time-change="timeChange"
      @btn-reset-click="reset"/>
      <a-tabs :default-active-key="activeKey" @change="callbackTab" tab-position="left">
        <a-tab-pane v-for="tab in tabData" :key="tab.value" :tab="tab.lable">
          <span v-show="tab.value === 1">
            <a-button type="danger" icon="plus" v-action:openAccountAddEnterpriseCmbBtn @click="add(1)">新增{{title}}</a-button>
          </span>
          <span v-show="tab.value === 2">
            <a-button type="danger" icon="plus" v-action:openAccountAddParkCmbBtn @click="add(2)">新增{{title}}</a-button>
          </span>
          <span v-show="tab.value === 3">
            <a-button type="danger" icon="plus" v-action:openAccountAddEnterpriseSeaBtn @click="add(3)">新增{{title}}</a-button>
          </span>
          <span v-show="tab.value === 4">
            <a-button type="danger" icon="plus" v-action:openAccountAddParkSeaBtn @click="add(4)">新增{{title}}</a-button>
          </span>
          <span v-show="tab.value === 5">
            <a-button type="danger" icon="plus" v-action:openAccountEnterpriseAlipayBtn @click="add(5)">新增{{title}}</a-button>
          </span>
          <span v-show="tab.value === 6">
            <a-button type="danger" icon="plus" v-action:openAccountAddParkAlipayBtn @click="add(6)">新增{{title}}</a-button>
          </span>
          <a-table :columns="table.columns" :pagination="table.pagination" @change="handleTableChange" rowKey="id" :data-source="table.loadData">
            <span slot="action" slot-scope="text, record">
              <span v-show="tab.value === 1">
                <a @click="otherAdd(record)" v-action:openAccountEnterpriseCmbBankBtn>管理付款账号</a>
                <a-divider type="vertical" v-action:openAccountEnterpriseCmbBankBtn/>
              </span>
              <span v-show="tab.value === 1 || tab.value ===2 && record.accountStatus !== 3">
                <a-popconfirm
                    title="销户不能恢复，是否销户?"
                    ok-text="销户"
                    cancel-text="取消"
                    @confirm="del(record)">
                  <a href="#" v-action:openAccountCancelBtn>销户</a>
                </a-popconfirm>
              </span>
              <span v-show="tab.value === 6 && record.accountStatus === 4">
                <a-divider type="vertical"/>
                 <a-popconfirm
                    :title="'是否发起【'+`${record.name} `+'】签约?'"
                    ok-text="签约"
                    cancel-text="取消"
                    @confirm="sign(record)">
                  <a href="#" v-action:openAccountPlipaySingBtn>签约</a>
                </a-popconfirm>
              </span>
            </span>
            <span slot="balance" slot-scope="text,record">
              <a-popover title="账号余额" trigger="click">
                <template #content>
                  <p style="color:red;font-size:30px;margin: 0;">¥{{balance}}</p>
                </template>
                <a-button type="link" @click="queryBalance(record)">查看余额</a-button>
              </a-popover>
            </span>
            <span slot="name" slot-scope="text, record">
              <a-popover title="企业名称" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.name}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.name | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="parkName" slot-scope="text, record">
              <a-popover title="园区平台公司名称" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.parkName}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.parkName | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="plipayParkName" slot-scope="text, record">
              <a-popover title="园区平台公司名称" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.name}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.name | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="accountNo" slot-scope="text, record">
              <a-popover title="子账户账号" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.accountNo}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.accountNo | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="parentAccountNo" slot-scope="text, record">
              <a-popover title="父级账户账户" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.parentAccountNo}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.parentAccountNo | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="corporateAccount" slot-scope="text, record">
              <a-popover title="关联对公账号" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.corporateAccount}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.corporateAccount | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="accountName" slot-scope="text, record">
              <a-popover title="账户名称（支付宝）" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.accountName}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.accountName | filterMore(8)}}</a-button>
              </a-popover>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
      <a-modal :title="form.title" :width="640" :visible="form.visible" @ok="handleCmbSubmit" @cancel="form.visible=false">
        <form-create v-model="form.fApi" :rule="form.rule" :option="form.option" @btn-enterprise-change="enterpriseChange"/>
      </a-modal>
      <sea-account ref="createSeaAccount" @on-ok="loadTable(true)"/>
      <cmb-account ref="createCmbAccount" @on-ok="loadTable(false)"/>
    </div>
</template>

<script>
import store from '@/store'
import moment from 'moment'
import { 
  getSysOpenAccountList,
  sysAddParkCmbOpenAccount,
  sysAddEnterpriseCmbOpenAccount,
  sysCancelBankAccount,
  sysOpenAccountBalance,
  getSysEnterpriseCmbPayAccount,
  sysAddEnterprisePayOpenAccount,
  sysAddParkPayOpenAccount,
  sysParkPaySign
} from '@/api/manage/openAccount'
import { 
  sysAllEnabledEnterprise
} from '@/api/manage/enterprise'
import {
  PARAMS_OPEN_ACCOUNT,
  FORM_CMB_ENTERPRISE,
  FORM_CMB_PARK,
  FORM_PAY_PARK,
  COLUMNS_CMB_ENTERPRISE,
  COLUMNS_CMB_PARK,
  COLUMNS_SEA_ENTERPRISE,
  COLUMNS_SEA_PARK,
  COLUMNS_ALIPAY_ENTERPRISE,
  COLUMNS_ALIPAY_PARK,
  OPTION_BLOCK,
  OPTION_INLINE,
  TAB_ACCOUNT_DATA
} from './modules/form'
import 
  SeaAccount
from './modules/sea_account'
import 
  CmbAccount
from './modules/cmb_account'
export default {
  name: 'openAccount',
  components:{
    SeaAccount,
    CmbAccount
  },
  data () {
    return {
        params:{
          fApi:{},
          rule:PARAMS_OPEN_ACCOUNT,
          option:OPTION_INLINE
        },
        tabData:TAB_ACCOUNT_DATA,
        activeKey:1,
        title:'企业开户',
        balance:'',
        form:{
            title:'企业开户',
            visible:false,
            fApi:{},
            rule:[],
            option:OPTION_BLOCK,
            enterpriseData:[],
            parkData:[]
        },
        table:{
          columns:COLUMNS_CMB_ENTERPRISE,
          loadData:[],
          pagination:{
            current:1,
            pageSize: 10,
             total:0,
            showSizeChanger: true,
					showQuickJumper: true,
            pageSizeOptions: ["10", "20", "50", "100"],
            showTotal: total => `共有 ${total} 条数据`,
          }
        }
    }
  },
  filters: {
      filterMore (value,num) {
      if (!value) return ''
      if (value.length > num) {
          return value.slice(0,num) + '...'
      }
      return value
      }
  },
  created () {
    this.loadTable(true);
    this.getEnterpriseList();
  },
  methods: {
    async getEnterpriseList(){
      this.form.enterpriseData = await store.dispatch('sysAllEnabledEnterprise');
      this.form.parkData = await store.dispatch('getSysAllParkEnable');
    },
    async loadTable(flag){
      let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        params.keyword = this.params.fApi.getValue('keyword');
        params.status = this.params.fApi.getValue('status');
        const time = this.params.fApi.getValue('time');
        params.startTime = time[0];
        params.endTime = time[1];
      }
      if(flag){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.type = this.activeKey%2===1 ? 1:2;
      params.payChannel = this.activeKey === 1 || this.activeKey === 2 ? 1:this.activeKey === 3 || this.activeKey === 4 ?2:3;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await getSysOpenAccountList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    timeChange(dates,dateStrings){
      this.params.fApi.setValue({'time':dateStrings})
    },
    handleTableChange(pagination){
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    callbackTab(key){
      this.title = key%2===1 ? '企业开户':'园区开户';
      this.activeKey = key;
      if(this.activeKey === 1){
        this.table.columns = COLUMNS_CMB_ENTERPRISE;
      }else if(this.activeKey === 2){
        this.table.columns = COLUMNS_CMB_PARK;
      }else if(this.activeKey === 3){
        this.table.columns = COLUMNS_SEA_ENTERPRISE;
      }else if(this.activeKey === 4){
        this.table.columns = COLUMNS_SEA_PARK;
      }else if(this.activeKey === 5){
        this.table.columns = COLUMNS_ALIPAY_ENTERPRISE;
      }else if(this.activeKey === 6){
        this.table.columns = COLUMNS_ALIPAY_PARK;
      }
      this.loadTable(true);
    },
    async add(state){
      this.form.title = state%2===1 ? '企业开户':'园区开户';
      if(state === 1 || state === 5){
        this.form.rule = FORM_CMB_ENTERPRISE;
        this.$nextTick(()=>{
          this.form.fApi.updateRules({'enterpriseId':{options:this.form.enterpriseData}});
          this.form.fApi.resetFields();
        });
        this.form.visible = true;
      }else if(state === 2){
        this.form.rule = FORM_CMB_PARK;
         this.$nextTick(()=>{
          this.form.fApi.updateRules({'parkId':{options:this.form.parkData}});
          this.form.fApi.resetFields();
        })
        this.form.visible = true;
      }else if(state === 3 || state === 4){
        let selectArr = [];
        if(state === 3){
            selectArr = await store.dispatch('sysAllEnabledEnterprise');
        }else if(state === 4){
            selectArr = await store.dispatch('getSysAllParkEnable');
        }
         this.$refs.createSeaAccount.add(state,selectArr)
      }else if(state === 6){
        this.form.rule = FORM_PAY_PARK;
         this.$nextTick(()=>{
          this.form.fApi.updateRules({'parkId':{options:this.form.parkData}});
          this.form.fApi.resetFields();
        })
        this.form.visible = true;
      }
    },
    async enterpriseChange(enterpriseId){
      this.form.fApi.setValue({'parkId':''});
      const { data } = await store.dispatch('sysGetEnterpriseIdRelationParkList',enterpriseId);
      data && data.forEach(v=>{
        v.value = v.parkId;
        v.label = v.parkName;
      })
      this.form.fApi.updateRules({'parkId':{options:data}})
    },
    handleCmbSubmit(){
      this.form.fApi.submit(async (formData, $f) => {
        try {
          if(this.activeKey === 1){
             const {code} =  await sysAddEnterpriseCmbOpenAccount(formData);
              if(code === '1'){
                this.$message.success('开户成功');
                this.form.visible = false;
                this.loadTable(true);
              }
          }else if(this.activeKey === 2){
             const {code} = await sysAddParkCmbOpenAccount(formData);
            if(code === '1'){
              this.$message.success('开户成功');
              this.form.visible = false;
              this.loadTable(true);
            }
          }else if(this.activeKey === 5){
            const {code} = await sysAddEnterprisePayOpenAccount(formData);
            if(code === '1'){
              this.$message.success('开户成功');
              this.form.visible = false;
              this.loadTable(true);
            }
          }else if(this.activeKey === 6){
            const {code} = await sysAddParkPayOpenAccount(formData);
            if(code === '1'){
              this.$message.success('开户成功');
              this.form.visible = false;
              this.loadTable(true);
            }
          }
        } catch (error) {
          this.$message.info(JSON.stringify(error));
        }
      })
    },
    async del(row){
      let params = {id:row.id};
      const {code} = await sysCancelBankAccount(params);
      if(code === '1'){
        this.$message.success('操作成功');
        this.loadTable(false);
      }
    },
    async queryBalance(item){
      const {code,data} = await sysOpenAccountBalance(item.id);
       if(code === '1'){
         this.balance = data.balance;
      }
    },
    async otherAdd(record){
     const {code,data} = await getSysEnterpriseCmbPayAccount(record.id);
     if(code === '1'){
       this.$refs.createCmbAccount.add(record.id,data);
     }
    },
    async sign(row){
      let params = {
        parkId:row.relationId,
        accountNo:String(row.accountNo)
      }
      const {code,data} = await sysParkPaySign(params);
      if(code === '1'){
        var temp = document.createElement("form");
        temp.action = data;
        temp.method = "post";
        temp.target = "_blank";
        temp.style.display = "none";
        document.body.appendChild(temp);
        temp.submit();

      /*   document.querySelector('body').innerHTML = req.data
        document.forms[0].target = '_blank'
        document.forms[0].submit() */

      }
    },
    reset(){
      this.params.fApi.resetFields();
      this.loadTable(true);
    }
  }
}
</script>

<style>
 /*  .ant-input-suffix{
    right: 0 !important;
  } */
</style>
